<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-color: black;
            margin: 0;
        }

        img {
            position: absolute;
        }

        div {
            width: 100%;
            text-align: center;
            height: 200px;
        }

        h2 {
            line-height: 200px;
            color: azure;
        }
    </style>
</head>

<body>
    <div>
        <h2 id="time"></h2>
    </div>

    <script src="./jq/jquery-1.4.2.min.js"></script>
    <script>
        //开启定时器添加雪花图片
        setInterval(function () {
            let img = $("<img src='img/snow.png'>");
            //设置雪花尺寸在20-40  0-20  + 20
            let size = parseInt(Math.random() * 21) + 20;
            //得到屏幕的宽和高
            let w = $(window).width();
            let h = $(window).height();
            //设置随机的雪花位置
            let left = parseInt(Math.random() * (w - size));

            img.css({ "width": size + "px", "left": left + "px", "top" : "-" + size + "px" });
            // $("body").append(img);
            $("body").prepend(img);

            //让雪花图片往下移动  20-40 *100   2000-4000
            img.animate({ "top": h - size + "px" }, size * 200).fadeOut(1000, function () {
                //淡出后把雪花删除 不然会卡
                img.remove();
            });
        }, 40);

        function counter() {
            var date = new Date();
            var year = date.getFullYear();
            var m = date.getMonth();
            var d = date.getDate();
            var date2 = new Date(year, m, d, 18, 00, 00);
            var time = (date2 - date) / 1000;
            var day = Math.floor(time / (24 * 60 * 60))
            var hour = Math.floor(time % (24 * 60 * 60) / (60 * 60))
            var minute = Math.floor(time % (24 * 60 * 60) % (60 * 60) / 60);
            var second = Math.floor(time % (24 * 60 * 60) % (60 * 60) % 60);
            var str = "距离18点还剩" + day + "天" + hour + "时" + minute + "分" + second + "秒";
            document.getElementById("time").innerText = str;
        }
        window.setInterval("counter()", 1000);
    </script>
</body>

</html>